import { useEffect, useState } from 'react'
import { Button } from 'tdesign-react'
import { useLanguage } from '@/stores'
import './index.less'

const Headers = () => {

  const { language, l, setLanguage } = useLanguage()

  const [showTitle, setShowTitle] = useState(true)
  const [showChinese, setShowChinese] = useState(language == 'zh-CN')

  useEffect(() => {
    // 设置默认主题
    switchTheme()
  }, [])

  /**
   * 切换主题
   */
  const switchTheme = () => {
    const theme = document.documentElement.getAttribute('theme-mode') || ''
    console.log(theme)
    switch (theme) {
      case 'default':
        document.documentElement.setAttribute('theme-mode', 'green')
        break
      case 'green':
        document.documentElement.setAttribute('theme-mode', 'pink')
        break
      case 'pink':
        document.documentElement.setAttribute('theme-mode', 'red')
        break
      case 'red':
        document.documentElement.setAttribute('theme-mode', 'orange')
        break
      case 'orange':
        document.documentElement.setAttribute('theme-mode', 'purple')
        break
      case 'purple':
        document.documentElement.setAttribute('theme-mode', 'cyan')
        break
      case 'cyan':
        document.documentElement.setAttribute('theme-mode', 'default')
        break
      default:
        document.documentElement.setAttribute('theme-mode', 'default')
        break
    }
  }

  /**
   * 展开、收起标题
   */
  const collapseTitle = () => {
    setShowTitle(!showTitle)
  }

  /**
   * 切换语言
   */
  const switchLanguage = () => {
    if (showChinese) {
      setShowChinese(false)
      setLanguage('en-US')
    } else {
      setShowChinese(true)
      setLanguage('zh-CN')
    }
  }

  return <div className={'header'}>
    <h1 className={`title ${showTitle ? 'show-title' : ''}`}><span className={'username'}>{l.home.titlePart1}</span>{l.home.titlePart2}</h1>
    <div className={'toolbar'}>
      <Button className={'theme-switch'} onClick={switchTheme}>{l.home.changeTheme}</Button>
      <Button className={'collapsed'} onClick={collapseTitle}>{showTitle ? l.home.collapseTitle : l.home.expandedTitle}</Button>
      <Button className={'lang-switch'} onClick={switchLanguage}>{showChinese ? l.home.switchEnglish : l.home.switchChinese}</Button>
    </div>
  </div>
}

export default Headers
